﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <!-- import CSS -->
  <link rel="stylesheet" type="text/css" href="../css/elem.css"/>
  <link rel="stylesheet" href="../css/display.css" />
  <link rel="stylesheet" href="../css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/searchList.css"/>
  <title>查询列表模板</title>
</head>
<body>
  <div id="app">
  	<el-container>
<!-------------------------  Begin头部查询条件   ------------------------->  		
 				 <el-header height="50px">
			 				 	<el-row :gutter="20">
						  		<el-col :span="18">
						  			<div class="search-table">
						  				<el-row :gutter="10">
						  					<el-col :span="6">
						  							  <el-input size="medium" placeholder="请输入内容" clearable>
						  										<template slot="prepend">产线：</template>
						  								</el-input>
						  					</el-col>	
						  					<el-col :span="6">
						  							  <el-input size="medium" placeholder="请输入内容" clearable>
						  										<template slot="prepend">总成：</template>
						  								</el-input>
						  					</el-col>	
						  					<el-col :span="6">
						  							  <el-input size="medium" placeholder="请输入内容" clearable>
						  										<template slot="prepend">车型：</template>
						  								</el-input>
						  					</el-col>	
						  						<el-col :span="6">
						  							  <el-input size="medium" placeholder="请输入内容" clearable>
						  										<template slot="prepend">产品零件号：</template>
						  								</el-input>
						  					</el-col>	
						  				</el-row>
						  			</div>
						  		</el-col>
						  		<el-col :span="6">
						  			<div class="search-btn">
							  				<el-button type="success">清空</el-button>
							  				<el-button type="primary">查询</el-button>
						  			</div>
						  		</el-col>
					</el-row>
 				 </el-header>
<!-------------------------头部查询条件  End ------------------------->
<!------------------------- Begin 中间数据表格------------------------->
  			<el-main>
  				
  				<!--<el-table :data="tableData" height="100%" border style="width: 100%;">
  					<el-table-column prop="date" label="日期" ></el-table-column>
  					<el-table-column prop="name" label="姓名" ></el-table-column>
  					<el-table-column prop="address" label="地址"></el-table-column>
  				</el-table>-->
  				
  					<el-table :data="tableData1.rows"  empty-text=" "  size="small"  height="100%" :summary-method="getSummaries" show-summary style="width:100%">
	  						<el-table-column align="center" html  prop="id" :formatter="fmtID" label="ID" ></el-table-column>
	  						<el-table-column align="center" prop="name" label="姓名"></el-table-column>
	  						<el-table-column align="center" prop="amount1" label="数值 1（元）"></el-table-column>
	  						<el-table-column align="center" prop="amount2" label="数值 2（元）"></el-table-column>
	  						<el-table-column align="center" prop="amount3" label="数值 3（元）">
	  							<template slot-scope="scope">
	  								<el-button size="mini" >编辑</el-button>
	  								<el-button size="mini" type="danger" >删除</el-button>
	  							</template>
	  						</el-table-column>
  					</el-table>
  			</el-main>
<!-------------------------中间数据表格  End ------------------------->  			
		</el-container>
		
		
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  <!-- import JavaScript -->
  <script src="../js/elem.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/es6-promise.auto.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/vuex.js" type="text/javascript" charset="utf-8"></script>
  <script>
  	Vue.use(Vuex) ;
  		Vue.component('tablei',{
				template:'<i class="el-icon-refresh" @click="reshFn"></i>',
				data:function(){
					return {name:'张三'} ;
				},
				props:['page'],
				methods:{
					reshFn:function(){
						alert('执行了点击事件'+this.page)
					}
				}
			}) ;
			const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
  	    new Vue({
      el: '#app',
      data: function() {
        return  {
        	tableData1:{
        		total:'共65条',
        		page:1,
        		rows:35,
        		footer:[{name:99}],
        		footer2:[],
        		rows:[{
          id: '12987122',
          name: '王小虎王',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
        	},
        	tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
	  methods: {
	  	getSummaries:function(param,pp) {
	  		   if(!this.tableData1.footer2.length){
	  		   	console.log(this);
//	  		   	var  abc = this.$createElement('b',{},['汇总行',this.$createElement('i',{attrs:{class:'el-icon-refresh'}})]) ;
	  		   	var  abc = this.$createElement('b',{},['汇总行',this.$createElement('tablei',{
	  		   		 props:[{
	  		   		 	page:'99'
	  		   		 }]
	  		   	})]) ;
	  		   		var ar = [abc],obj=this.tableData1.footer[0];
	  		   		for(var a =1,arr=param.columns,d;d=arr[a];a++){
	  		   			   	  ar.push(obj[d.property]||'') ;
		  		   				if(a==arr.length-2)break ;
	  		   		}
	  		   		ar.push(this.tableData1.total) ;
	  		   		this.tableData1.footer2=ar ;
	  		   }
	  		   return this.tableData1.footer2 ;
     },
     fmtID:function(row, column, v, index){
     	return v; 
     }
  	}
    })
  	
  </script>
</html>